// ==UserScript==
// @name         问小白AI聊天文字显示优化
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  优化问小白网页的聊天界面文字显示效果
// @author       You
// @match        https://www.wenxiaobai.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wenxiaobai.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待页面加载完成
    window.addEventListener('load', function() {
        // 等待聊天内容区域加载
        const checkExist = setInterval(function() {
            const chatContentDiv = document.getElementById('scrollableChatContentDiv');
            if (chatContentDiv) {
                clearInterval(checkExist);
                initTextOptimizer();
            }
        }, 500);
    });

    function initTextOptimizer() {
        // 创建控制面板
        createControlPanel();
        
        // 应用初始样式
        applyTextStyles();
        
        // 监听页面变化，处理动态加载的内容
        observePageChanges();
    }

    function createControlPanel() {
        // 创建控制面板容器
        const panel = document.createElement('div');
        panel.id = 'wxb-text-optimizer-panel';
        panel.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            transition: all 0.3s ease;
            width: 250px !important;
            max-width: 250px !important;
        `;

        // 创建标题
        const title = document.createElement('h3');
        title.textContent = '聊天文字显示优化';
        title.style.cssText = 'margin: 0 0 15px 0; font-size: 16px; text-align: center;';
        panel.appendChild(title);

        // 创建文本大小滑块
        createSlider(panel, 'text-size', '文本大小', '5', '45', '16', 2, function(value) {
            localStorage.setItem('wxb-text-size', value + 'px');
            applyTextStyles();
        });

        // 创建行高滑块
        createSlider(panel, 'line-height', '行高倍数', '0.5', '5', '1.5', 0.2, function(value) {
            localStorage.setItem('wxb-line-height', value);
            applyTextStyles();
        });

        // 创建宽度比例滑块
        createSlider(panel, 'width-ratio', '内容宽度', '50', '100', '80', 2, function(value) {
            localStorage.setItem('wxb-width-ratio', value + '%');
            applyTextStyles();
        });

        // 创建小圆点
        const dot = document.createElement('div');
        dot.id = 'wxb-control-dot';
        dot.innerHTML = '⚙️';
        dot.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #1890ff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10000;
            font-size: 18px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            display: none;
        `;
        
        document.body.appendChild(panel);
        document.body.appendChild(dot);
        
        // 点击小圆点显示面板
        dot.addEventListener('click', function() {
            panel.style.display = 'block';
            dot.style.display = 'none';
            
            // 重置自动隐藏计时器
            resetAutoHideTimer();
        });
        
        // 初始显示面板，8秒后自动隐藏
        let autoHideTimer = setTimeout(hidePanel, 8000);
        
        // 鼠标移入面板时清除自动隐藏计时器
        panel.addEventListener('mouseenter', function() {
            clearTimeout(autoHideTimer);
        });
        
        // 鼠标移出面板时启动自动隐藏计时器
        panel.addEventListener('mouseleave', function() {
            autoHideTimer = setTimeout(hidePanel, 5000);
        });
        
        function hidePanel() {
            panel.style.display = 'none';
            dot.style.display = 'flex';
        }
        
        function resetAutoHideTimer() {
            clearTimeout(autoHideTimer);
            autoHideTimer = setTimeout(hidePanel, 8000);
        }
    }

    function createSlider(parent, id, label, min, max, defaultValue, step, onChange) {
        // 创建滑块容器
        const container = document.createElement('div');
        container.style.cssText = 'margin-bottom: 15px; width: 100% !important; max-width: 100% !important;';
        
        // 创建标签
        const labelElem = document.createElement('label');
        labelElem.textContent = label + ': ';
        labelElem.htmlFor = 'wxb-' + id;
        labelElem.style.cssText = 'display: block; margin-bottom: 5px;';
        
        // 创建值显示
        const valueDisplay = document.createElement('span');
        valueDisplay.id = 'wxb-' + id + '-value';
        valueDisplay.style.cssText = 'float: right;';
        labelElem.appendChild(valueDisplay);
        
        // 创建滑块
        const slider = document.createElement('input');
        slider.type = 'range';
        slider.id = 'wxb-' + id;
        slider.min = min;
        slider.max = max;
        slider.step = step;
        
        // 获取保存的值或使用默认值
        const savedValue = localStorage.getItem('wxb-' + id) || defaultValue;
        slider.value = parseFloat(savedValue);
        valueDisplay.textContent = slider.value + (id === 'line-height' ? 'x' : (id === 'width-ratio' ? '%' : 'px'));
        
        slider.style.cssText = 'width: 100%; height: 5px; border-radius: 5px;';
        
        // 添加事件监听
        slider.addEventListener('input', function() {
            valueDisplay.textContent = this.value + (id === 'line-height' ? 'x' : (id === 'width-ratio' ? '%' : 'px'));
            onChange(this.value);
        });
        
        // 组装并添加到父元素
        container.appendChild(labelElem);
        container.appendChild(slider);
        parent.appendChild(container);
        
        // 初始化调用一次onChange以应用初始值
        onChange(slider.value);
    }

    function applyTextStyles() {
        // 移除旧的样式元素
        const oldStyle = document.getElementById('wxb-text-optimizer-styles');
        if (oldStyle) {
            oldStyle.remove();
        }
        
        // 创建样式元素
        const styleEl = document.createElement('style');
        styleEl.id = 'wxb-text-optimizer-styles';
        
        // 从localStorage获取保存的值或使用默认值
        const textSize = localStorage.getItem('wxb-text-size') || '16px';
        const lineHeight = localStorage.getItem('wxb-line-height') || '1.5';
        const widthRatio = localStorage.getItem('wxb-width-ratio') || '80%';
        
        // 生成CSS内容
        let cssContent = `
            /* 控制面板样式保护 - 始终保持固定宽度 */
            #wxb-text-optimizer-panel {
                width: 250px !important;
                max-width: 250px !important;
                box-sizing: border-box !important;
            }
            
            #wxb-text-optimizer-panel * {
                box-sizing: border-box !important;
            }
            
            #wxb-text-optimizer-panel input[type="range"] {
                width: 100% !important;
            }
            
            /* 文本大小和行高 */
            .markdown-body p,
            .markdown-body li,
            .markdown-body ol,
            .markdown-body ul,
            .markdown-body span,
            .Question_question_content_pre__Q3Q4I,
            [class*="Question_question_content"] {
                font-size: ${textSize} !important;
                line-height: ${lineHeight} !important;
            }
            
            /* 数学公式调整 */
            .katex {
                font-size: calc(${textSize} * 1.1) !important;
            }
        `;
        
        // 根据宽度比例设置不同的样式
        if (widthRatio === '100%') {
            // 100%宽度时的样式 - 完全占满浏览器宽度
            cssContent += `
                /* 重置所有可能影响宽度的容器 */
                body, html {
                    overflow-x: hidden !important;
                    width: 100% !important;
                    max-width: 100% !important;
                }
                
                /* 直接针对聊天内容区域的所有容器 */
                .botChatPage_page_container__h5moB,
                #bot-chat-page-container,
                #scrollableChatContentDiv,
                .infinite-scroll-component__outerdiv,
                .infinite-scroll-component,
                .TurnCard_turn_container__BIcGD,
                .Question_question_container__eprjP,
                .Question_question_content__9BvqS,
                .Answser_answer_body_content__7JyUi,
                .Answser_answer_right_content__kAUO7,
                .Answser_answer_container__vKyC3,
                [data-sentry-component="AnswerPure"],
                .Answser_answer_content__coPAF,
                .Answser_answer_content__uOOYl,
                [class*="Answser_answer_content"],
                .OnlineThinkChatHeader_box__xvHru,
                .markdown-body,
                .MsgInput_container_wrapper__XWLzJ {
                    width: 100% !important;
                    max-width: 100% !important;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                    padding-left: 20px !important;
                    padding-right: 20px !important;
                    box-sizing: border-box !important;
                }
                
                /* 特别处理具有固定宽度的元素 */
                div[style*="max-width:"],
                div[style*="max-width="],
                div[style*="max-width: "],
                div[style*="width:"],
                div[style*="width="],
                div[style*="width: "] {
                    max-width: 100% !important;
                    width: 100% !important;
                    margin: 0 !important;
                }
                
                /* 特别针对固定宽度832px的元素 */
                div[style*="max-width: 832px"] {
                    max-width: 100% !important;
                    width: 100% !important;
                    margin: 0 !important;
                }
                
                /* 确保聊天输入框区域也是全宽的 */
                div[style*="position: relative; max-width: 832px"] {
                    max-width: 100% !important;
                    width: 100% !important;
                }
            `;
        } else {
            // 非100%宽度时的样式 - 根据用户设置的比例调整
            cssContent += `
                /* 聊天内容区域样式 */
                .botChatPage_page_container__h5moB,
                #bot-chat-page-container,
                #scrollableChatContentDiv,
                .infinite-scroll-component__outerdiv,
                .infinite-scroll-component,
                .TurnCard_turn_container__BIcGD,
                .Question_question_container__eprjP,
                .Question_question_content__9BvqS,
                .Answser_answer_body_content__7JyUi,
                .Answser_answer_right_content__kAUO7,
                .Answser_answer_container__vKyC3,
                [data-sentry-component="AnswerPure"],
                .Answser_answer_content__coPAF,
                .Answser_answer_content__uOOYl,
                [class*="Answser_answer_content"],
                .OnlineThinkChatHeader_box__xvHru,
                .markdown-body,
                .MsgInput_container_wrapper__XWLzJ,
                div[style*="max-width: 832px"] {
                    max-width: ${widthRatio} !important;
                    width: ${widthRatio} !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }
            `;
        }
        
        styleEl.textContent = cssContent;
        document.head.appendChild(styleEl);
    }

    function observePageChanges() {
        // 创建一个观察器实例
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                    // 当有新节点添加时，重新应用样式
                    applyTextStyles();
                }
            });
        });
        
        // 配置观察选项
        const config = { 
            childList: true, 
            subtree: true 
        };
        
        // 开始观察文档中的变化
        observer.observe(document.body, config);
    }
})();
